<html>

<head>
    <script>
        function onColorChanged (event) {
            // var kvlist = [];
            // for(var key in event) {
            //     kvlist.push(key + ":" + event[key])
            // }
            // alert(kvlist.join('\n'));
            
            document.getElementById("main").style.backgroundColor = event["color"];
        }
        
        function onLoad() {
				if (typeof(QCefClient) == 'undefined') { 
                    return;
				}
                
                QCefClient.addEventListener("colorChange", onColorChanged)
			}
			
			function onInvokeMethodClicked() {
				QCefClient.invokeMethod("TestMethod", 1, false, "arg3");
            }
            
            function onDragAreaMouseDown() {
                QCefClient.invokeMethod("onDragAreaMouseDown");
            }
			
			function onQCefQueryClicked() {
                var query = {
                    request: document.getElementById("message").value,
                    onSuccess: function(response) {
                        alert(response);
                    },
                    onFailure: function(error_code, error_message) {
                        alert(error_message);
                    }
                }
                window.QCefQuery(query);
			}
            
            
            /**
             * getFuntionName()
             * @param {Function} func
             * @return {String} 
             */
            function getFunctionName(func) {
                if (  typeof func == 'function' ||  typeof func == 'object'  ) {
                var  name = ('' + func).match(/function\s*([\w\$]*)\s*\(/);
                }
                return name &&  name[1];
            }
            /**
             * trace
             * @param [int] [count=10]
             * @return {String} 
             */
            trace = function() {
                var stack =  [],
                caller = arguments.callee.caller;
                
                while  (caller) {
                    stack.unshift(getFunctionName(caller));
                    caller = caller && caller.caller;
                }
                return 'functions on stack:' + '\n' + stack.join('\n');
            }

      function OpenPopup() {
        var popup = window.open("", "PopupWindow", "width=800, height=600");
        popup.document.write("<p>This is popup window.</p>");
      }

    </script>
</head>

<body onload="onLoad()" id="main">
    <h1 align="center" style="font-size:12pt; font-family:MS Shell Dlg 2;">Web Area</h1>
    <div align="center" id="dragarea" style="height:40px; background-color: gray; color: white;" onmousedown="onDragAreaMouseDown()">
        <span style="font-size:18pt; font-family:MS Shell Dlg 2;">you can drag this window in this area!</span>
    </div>
    <div align="center">
      <label> Test Case for InvokeMethod </label>
      <br />
      <input type="button" value="Invoke Method" onclick="onInvokeMethodClicked()" />
      <br />
      <br />

      <label> Test Case for QCefQuery </label>
      <br />
      <textarea id="message" style="width:320px; height:120px;">this message will be processed by native code.</textarea>
      <br />
      <input type="button" value="Query" onclick="onQCefQueryClicked()" />
      <br />
      <br />

      <label>Test Case for QCefUrlQuery</label>
      <br />
      <a href="qcef://test/a/b">qcef://test/a/b</a>

      <br />
      <br />
      <button onclick="OpenPopup()">Open Popup</button>
    </div>
</body>

</html>